<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div #box{
            width: 100px;
            height: 100px;
            color: darkgray;
        }
        .red{
            background-color: red;
        }
        .blue{
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="app">
<!--    <button @click="color='red'">红色</button>-->
<!--    <button @click="color='blue'">蓝色</button>-->
<!--    <div id="box" :class="color">-->
<!--        我是盒子<br>-->
<!--        我是盒子-->
<!--    </div>-->
    <button @click="isRed =! isRed">点击切换颜色</button>
    <div id="box" :class="{red:isRed,blue:!isRed}">
        我是盒子<br>
        我是盒子
    </div>
    <!--计算属性-->
    <h2>
        您的生日是：{{birth}}
    </h2>
    <!--watch-->
    <input type="text" v-model="num"/>
    <h1>num:{{num}}</h1>
    <input type="text" v-model="person.age"/>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",// elemnet,vue 作用的标签
        data:{
            color:"red",
            isRed:true,
            birthday:1629897747609,  // 毫秒值
            num:1,
            person:{
                name:"张三",
                age:21
            }
        },
        computed:{
            birth(){
                const day = new Date(this.birthday);
                return day.getFullYear()+"年"+day.getMinutes()+"月"+day.getDay()+"日";
            }
        },
        watch:{
            num(newVal,oldVal){
                console.log(newVal,oldVal);
            },
            person:{
                deep:true,
                handler(val){
                    console.log(val.age)
                }
            }
        }
    });
</script>
</body>
</html>